# Component: Badge

Small count and status indicators

Utility Block

![[Pasted image 20260426081403.png]]

### BEM Anatomy

| Type      | Class Name        | Description                                                                   |
| --------- | ----------------- | ----------------------------------------------------------------------------- |
| Bootstrap | `.badge`          | Injected to inherit Bootstrap's base badge layout (border-radius, font-size). |
| ==Block== | `.as-badge`       | The base styling for the badge. Defaults to `secondary` color.                |
| Modifier  | `--image-count`   | Contextual modifier for displaying file or image counts.                      |
| Modifier  | `--success`       | Applies `var(--bs-success)` background.                                       |
| Modifier  | `--warning`       | Applies `var(--bs-warning)` background.                                       |
| Modifier  | `--danger`        | Applies `var(--bs-danger)` background.                                        |
| Modifier  | `--category`      | (Seen in Article Item) Used for category labels on images.                    |
| Modifier  | `--program-state` | (Seen in Media Program) Used to show state of the program item                |

### Implementation Reference

##### Generated HTML

```html
<!-- Example: Image Count Badge -->
<span class="as-badge as-badge--image-count badge">
    <i class="fa-solid fa-images"></i>
    12
</span>

<!-- Example: Status Modifier -->
<span class="as-badge as-badge--success badge">
    Active
</span>
```

##### SCSS

```scss
.as-badge {
  background-color: var(--bs-secondary);

  &--success {
    background-color: var(--bs-success);
  }
  &--warning {
    background-color: var(--bs-warning);
  }
  &--danger {
    background-color: var(--bs-danger);
  }
}
```

